<template>
	<div class="pointDetail">
		<div class="breadcrumbDiv">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{path: '/home'}">主页</el-breadcrumb-item>
				<el-breadcrumb-item>积分使用明细</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!--	搜索框	-->
		<div class="content">
			<div class="pointDetail-search">
				<el-form ref="form" :inline="true" :model="searchform" label-width="80px" size="medium">
					<el-form-item label="用户姓名">
						<el-input v-model="searchform.user_true_name"></el-input>
					</el-form-item>
					<el-form-item label="订单ID">
						<el-input v-model="searchform.order_id"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="searchSubmit"><i class="el-icon-search"></i> 搜索</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="pointDetail-buttons">
				<!--批量删除 -->
				<div class="del-button-div">
					<el-button type="danger" size="medium" :disabled="delButton" @click="delselect"><i class="el-icon-delete"></i> 批量删除</el-button>
				</div>
				<div class="pointDetail-state">
					<el-select v-model="searchform.point_change_id" @change="stateChange" placeholder="请选择">
						<el-option v-for="item in options" :key="item.constant_term_id" :label="item.constant_term_meaning" :value="item.constant_term_id">
						</el-option>
					</el-select>
				</div>
			</div>
			<!-- 菜品表格 -->
			<div class="pointDetail-table">
				<el-table :data="tableData" style="width: 100%" @selection-change="searchChange">
					<el-table-column type="selection" width="55px" align="center">
					</el-table-column>
					<el-table-column prop="point_detail_id" label="积分明细ID" sortable>
					</el-table-column>
					<el-table-column prop="user_id" label="用户ID">
					</el-table-column>
					<el-table-column prop="user_true_name" label="用户姓名">
					</el-table-column>
					<el-table-column prop="order_id" label="订单ID">
					</el-table-column>
					<el-table-column prop="point_change_amount" label="变动数额">
					</el-table-column>
					<el-table-column prop="constantTerm.constant_term_meaning" label="变动描述">
					</el-table-column>
					<!--<el-table-column label="操作" width="130" align="center">
						<template slot-scope="scope">
							<el-button @click="lookClick(scope.row)" type="text"><i class="el-icon-search"></i> 查看</el-button>
							<el-button @click="delClick(scope.row)" type="text"><i class="el-icon-delete"></i> 删除</el-button>
						</template>
					</el-table-column>-->
				</el-table>
			</div>
			<!-- 分页相关 -->
			<div class="pointDetail-page">
				<div class="block">
					<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
					 :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	import PointDetailService from './PointDetailService.js'
	
	export default {
		name: "PointDetail",
		data() {
			return {
				searchform: {
					user_true_name: '',
					order_id: '',
					point_change_id: '',
				},

				//订单状态查询
				options: [{
					constant_term_id: '',
					constant_term_kind: '',
					constant_term_meaning: "全部",
				}],

				tableData: [],
				pageNum: 1,
				pageSize: 5,
				total: 50,
				
				delButton:true,
			}
		},
		created() {
			this.searchByConstant(5);
			this.getPage(this.pageNum, this.pageSize);
		},
		methods: {
			//提交搜索表单
			searchSubmit() {
				this.getPage(this.pageNum, this.pageSize);
			},
			//状态改变
			stateChange(){
				this.pageNum = 1;
				this.getPage(this.pageNum, this.pageSize);
			},
			//批量删除
			delselect() {

			},
			//编辑
			lookClick(row) {
				
			},
			//单删
			delClick(row) {
			
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.getPage(this.pageNum, this.pageSize);
			},
			handleCurrentChange(val) {
				this.pageNum = val;
				this.getPage(this.pageNum, this.pageSize);
			},
			getPage(pageNum, pageSize) {
				PointDetailService.searchbypointdetailPageService(this.searchform, {
					pageNum: pageNum,
					pageSize: pageSize
				}, res => {
					// console.log(res);
					this.tableData = res.searchResyltWithPage.list;
					this.total = res.searchResyltWithPage.total;
				})
			},
			//表格选择改变回调
			searchChange(select){
			  this.delButton = select.length == 0;
			},
			//查询常数项表，订单状态
			searchByConstant(kindId) {
				PointDetailService.searchByConstantService({
					constant_term_kind: kindId,
				}, res => {
					// console.log(res);
					// this.options = [...this.options,...res.searchByConstantTermList];
					this.options.push.apply(this.options,res.searchByConstantTermList);
				})
			},
		}
	}
</script>

<style scoped lang="less">
	
	@import '../../../style/Common.less';
	
	.pointDetail {
	}
	
	.pointDetail-content{
	
	}

	.pointDetail-search {
		color: #606266;
		font-weight: bold;
	}

	.pointDetail-buttons {
		display: flex;

		.del-button-div,
		.pointDetail-state {
			margin: 0 12px 20px 12px;
		}

		.pointDetail-state {
			margin-left: auto;
		}
	}

	.pointDetail-table {}

	.pointDetail-page {
		height: 32px;
		margin: 20px 20px 0 0;
		float: right;
	}

	.pointDetail-add-dialog {
		.pointDetail-add {
			padding: 0 20px;
		}
	}
</style>



